<template>
  <el-container>
    <!-- 我的作品列表 -->
    <el-card class="zeroWork" v-if="zeroWork" style="width: 85%">
      <img src="../assets/zeroWork.png">
      <span class="tip">你还没有上传过作品哦！</span>
    </el-card>
    <el-card v-if="!zeroWork" class="myWorkList" style="width: 85%">
      <el-table ref="filterTable" :data="myWorkList" style="width: 100%" @row-click="openDetails">
        <el-table-column label="预览" width="120">
          <template slot-scope="scope">
            <img v-if="scope.row.workType=='文档'" :src="GLOBAL_BASE_URL+'/digital-works/doc-image.png'" class="image">
            <img v-if="scope.row.workType=='图像'" :src="GLOBAL_BASE_URL+'/' + scope.row.workAddress" class="image">
            <!-- <img v-if="scope.row.workType=='文档'" src="http://localhost:8080/digital-works/doc-image.png" class="image"> -->
            <!-- <img v-if="scope.row.workType=='图像'" :src="'http:\\\\localhost:8080\\' + scope.row.workAddress" class="image"> -->
          </template>
        </el-table-column>
        <el-table-column prop="workName" label="作品名称" :formatter="formatter">
        </el-table-column>
        <el-table-column prop="workTime" label="日期" sortable width="120" column-key="date">
        </el-table-column>
        <el-table-column prop="workType" label="类型" width="120"
          :filters="[{ text: '图像', value: '图像' }, { text: '文档', value: '文档' }]" :filter-method="filterTag"
          filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag :type="scope.row.workType === '图像' ? 'primary' : 'success'" disable-transitions>
              {{scope.row.workType}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="workStatus" label="状态" width="120"
          :filters="[{ text: '已通过', value: '已通过' }, { text: '重复率过高', value: '重复率过高' },{ text: '未通过', value: '未通过' }, { text: '审核中', value: '审核中' }, { text: '申诉中', value: '申诉中' }]"
          :filter-method="filterHandler">
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click.stop="workDelete(scope.$index, scope.row)">删除</el-button>
            <div class="appealDialog" @click.stop="" style="width:56px">
              <el-button size="mini" @click.stop="handleAppeal(scope.$index, scope.row)"
                v-if="scope.row.workStatus=='未通过'">申诉</el-button>
              <el-dialog title="申诉信息填写" :visible.sync="dialogFormVisible">
                <el-form :model="appealForm">
                  <el-form-item label="作品名称" :label-width="formLabelWidth">
                    <el-input v-model="appealForm.workName" :disabled="true">
                    </el-input>
                  </el-form-item>
                  <el-form-item label="申诉理由" :label-width="formLabelWidth">
                    <el-input type="textarea" :rows="4" placeholder="请输入申诉详情及理由" v-model="appealForm.reason">
                    </el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="cancelAppeal ()">取 消</el-button>
                  <el-button type="primary" @click="postAppeal ()">确 定</el-button>
                </div>
              </el-dialog>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination @current-change="handleCurrentChange" :current-page="queryInfo.pageindex"
        :page-size="queryInfo.pagesize" layout="total, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
  </el-container>
</template>

<script>
export default {
  data () {
    return {
      GLOBAL_BASE_URL: this.GLOBAL.BASE_URL,
      appealForm: {
        workName: '',
        workId: '',
        reason: ''
      },
      // 获取作品列表的参数对象
      queryInfo: {
        query: '',
        pageindex: 1,
        pagesize: 4
      },
      check: false,
      userId: '',
      zeroWork: false,
      dialogFormVisible: false,
      formLabelWidth: '100px',
      myWorkList: [], // 把获取到的我的作品列表放在这里
      total: 4 // 总数据条数
    }
  },
  created () {
    // 获取userID （待修改）
    this.userId = this.$route.params.id
    // this.userId = '123testuserid'// for mockjs test
    // 发起当前组件的首页数据请求
    this.getHomeWorkList()
  },
  methods: {
    getHomeWorkList () {
      // console.log('获取数据')
      this.$axios.get('/user/getHomeWorkList', {
        params: {
          userId: this.userId,
          pageindex: this.queryInfo.pageindex,
          pagesize: this.queryInfo.pagesize
        }
      }).then(res => {
        console.log(res)
        this.myWorkList = res.data.data
        this.total = res.data.total
        if (this.myWorkList.length === 0) {
          this.zeroWork = true
        }
      }).catch(err => {
        if (err.response) {
          console.log(err.response.status)
          if (err.response.status === 404) {
            alert('客户端请求出现问题')
          } else if (err.response.status >= 500) {
            alert('服务端接口出现问题')
          }
        } else if (err.request) { // 请求已经发起但没有响应，需要配合后端实现的错误处理
          console.error(err.request)
        } else { // 请求没有发起，也没有响应，需要配合后端实现的错误处理
          console.error(err.message)
        }
      })
    },
    formatter (row, column) {
      return row.workName
    },
    filterTag (value, row) {
      return row.workType === value
    },
    filterStatus (value, row) {
      return row.workStatus === value
    },
    filterHandler (value, row, column) {
      const property = column.property
      return row[property] === value
    },
    // 监听表格行，跳到作品详情
    openDetails (row, event, column) {
      console.log(row)
      if (row.workType === '图像') {
        const type = 'img'
        this.$router.push('/details/' + this.userId + '/' + type + '/' + row.workId)
      }
      if (row.workType === '文档') {
        const type = 'txt'
        this.$router.push('/details/' + this.userId + '/' + type + '/' + row.workId)
      }
    },
    // 监听申诉按钮
    handleAppeal (index, row) {
      this.dialogFormVisible = true
      this.appealForm.workName = row.workName
      this.appealForm.workId = row.workId
    },
    // 取消申诉
    cancelAppeal () {
      this.dialogFormVisible = false
      this.$message({
        type: 'info',
        message: '取消申诉',
        duration: 1000
      })
    },
    // 发起申诉
    postAppeal () {
      this.dialogFormVisible = false
      this.$axios({
        methods: 'post',
        url: '/user/postAppeal',
        params: {
          userId: this.userId,
          workName: this.appealForm.workName,
          workId: this.appealForm.workId,
          reason: this.appealForm.reason
        }
      }).then((res) => {
        console.log(res)
        this.check = res.data.data
        if (this.check === true) {
          this.$message({
            type: 'success',
            message: res.data.msg
          })
          this.getHomeWorkList()// 重新获取预览列表数据
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(function (error) { console.log(error) })
    },
    workDelete (index, row) {
      console.log(index, row)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios({
          methods: 'post',
          url: '/user/workDelete',
          params: {
            userId: this.userId,
            workId: row.workId
          }
        }).then(res => {
          console.log(res)
          this.check = res.data.data
          if (this.check === true) {
            this.myWorkList.splice(index, 1)// 前端删除该行
            this.$message({
              type: 'success',
              message: res.data.msg
            })
            this.getHomeWorkList()// 重新获取预览列表数据
          } else {
            alert(res.data.msg)
          }
        }).catch(err => {
          if (err.response) {
            console.log(err.response.status)
            if (err.response.status === 404) {
              alert('客户端请求出现问题')
            } else if (err.response.status >= 500) {
              alert('服务端接口出现问题')
            }
          } else if (err.request) { // 请求已经发起但没有响应，需要配合后端实现的错误处理
            console.error(err.request)
          } else { // 请求没有发起，也没有响应，需要配合后端实现的错误处理
            console.error(err.message)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 监听页码值改变的事件
    handleCurrentChange (newPage) {
      console.log(newPage)
      this.queryInfo.pageindex = newPage
      this.getHomeWorkList()
    }
  }
}
</script>

<style lang="less" scoped>
.el-container{
  display: flex;
  justify-content: center;
}

.zeroWork {
  img{
    margin-top: 10%;
    margin-left: 45%;
    float: left;
  }
  .tip {
    color: #cdcdcd;
    float: right;
    margin-right: 40%;
  }
}
.el-table img {
  position: relative;
  width: 70px;
  height: 70px;
}

.appealDialog{
  // margin-right: 5px;
  float: right;
}
</style>
